<script setup lang="ts">
import { $t } from '@/locales';

defineOptions({
  name: 'RecordSearch'
});

interface Emits {
  (e: 'reset'): void;
  (e: 'search'): void;
}

const emit = defineEmits<Emits>();

const model = defineModel<Api.Outbound.CallRecordSearchParams>('model', { required: true });

function reset() {
  emit('reset');
}

function search() {
  emit('search');
}

const callResultOptions = [
  { label: '正常接通', value: 1 },
  { label: '关机', value: 2 },
  { label: '停机', value: 3 },
  { label: '空号', value: 4 },
  { label: '暂时无法接通', value: 6 },
  { label: '无人接听', value: 7 },
  { label: '被叫忙', value: 8 },
  { label: '被叫拒接', value: 9 },
  { label: '未接通', value: 2000 }
];
</script>

<template>
  <NCard :title="$t('common.search')" :bordered="false" size="small" class="card-wrapper">
    <NForm :model="model" size="small" :label-width="80">
      <NGrid :cols="24" :x-gap="18">
        <NGridItem :span="6">
          <NFormItem label="通话ID" path="callId">
            <NInput v-model:value="model.callId" placeholder="请输入通话ID" />
          </NFormItem>
        </NGridItem>
        <NGridItem :span="6">
          <NFormItem label="被叫号码" path="callee">
            <NInput v-model:value="model.callee" placeholder="请输入被叫号码" />
          </NFormItem>
        </NGridItem>
        <NGridItem :span="6">
          <NFormItem label="任务ID" path="taskId">
            <NInputNumber v-model:value="model.taskId" placeholder="请输入任务ID" class="w-full" />
          </NFormItem>
        </NGridItem>
        <NGridItem :span="6">
          <NFormItem label="通话状态" path="callResult">
            <NSelect
              v-model:value="model.callResult"
              placeholder="请选择通话状态"
              :options="callResultOptions"
              clearable
            />
          </NFormItem>
        </NGridItem>
        <NGridItem :span="24">
          <NSpace class="w-full justify-end">
            <NButton @click="reset">
              <template #icon>
                <icon-ic-round-refresh class="text-icon" />
              </template>
              {{ $t('common.reset') }}
            </NButton>
            <NButton type="primary" ghost @click="search">
              <template #icon>
                <icon-ic-round-search class="text-icon" />
              </template>
              {{ $t('common.search') }}
            </NButton>
          </NSpace>
        </NGridItem>
      </NGrid>
    </NForm>
  </NCard>
</template>

<style scoped></style>
